<script lang="ts" setup>
import { computed, defineEmits } from 'vue'
import { ContentItem } from './NoteContainer.vue'

const props = defineProps<{
  contentItem: ContentItem
  comment: string
}>()

const time = computed(() => {
  const _time = props.contentItem.createTime
  const year = parseInt(_time.substring(0, 4))
  return year == new Date().getFullYear()
    ? _time.split(' ')[0].substring(5)
    : _time.split(' ')[0]
})
const emit = defineEmits(['update:comment', 'update:parentId'])
function reply() {
  console.log('reply')
  emit('update:comment', `@${props.contentItem.nickname} ${props.comment}`)
  emit('update:parentId', props.contentItem.id)
}
</script>

<template>
  <div class="comment-item">
    <q-avatar size="md">
      <img :src="contentItem.avatar" />
    </q-avatar>
    <div class="right">
      <div class="author">{{ contentItem.nickname }}</div>
      <div class="content">{{ contentItem.content }}</div>
      <div class="info">
        {{ time }}
        &nbsp;
        {{ contentItem.location }}

        <div class="reply" @click="reply">
          <q-icon name="chat_bubble" size="15px" style="margin: 0 0 0 10px" />
          回复
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-item {
  @include flex($item: none);
}

.right {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  flex: 1 0 auto;

  .avatar {
    flex: 0 auto auto;
  }
  .author {
    font-size: 1em;
    color: grey;
  }

  .content {
    margin-top: 5px;
    line-height: 22px;
    color: #333;
    width: 290px;
  }

  .info {
    @include flex($content: none);
    margin: 5px 0 10px 0;
    font-size: 12px;
    line-height: 16px;
    color: #999;
  }

  .reply {
    color: #ffb142;
    cursor: pointer;
  }
}
</style>
